import React, { Component } from 'react';

import './Progress.scss'
class Progress extends Component {
  getSecond() {
    if (this.props.stage === 1) {
      return (
        <div className="item">
          <img src={require('../../images/circle2.png')} alt=""></img>
          <div className="text">{this.props.text[1]}</div>
        </div>
      )
    } else {
      return (
        <div className="item">
          <img src={require('../../images/circle1.png')} alt=""></img>
          <div className="text text-active">{this.props.text[1]}</div>
        </div>
      )
    }
  }
  getThird() {
    if (this.props.stage === 3) {
      return (
        <div className="item">
          <img src={require('../../images/circle1.png')} alt=""></img>
          <div className="text text-active">{this.props.text[2]}</div>
        </div>
      )
    } else {
      return (
        <div className="item">
          <img src={require('../../images/circle2.png')} alt=""></img>
          <div className="text">{this.props.text[2]}</div>
        </div>
      )
    }
  }
  render() {
    return (
      <div className="progress flex x-center">
        <div className="item">
          <img src={require('../../images/circle1.png')} alt=""></img>
          <div className="text text-active">{this.props.text[0]}</div>
        </div>
        {this.getSecond.call(this)}
        {this.getThird.call(this)}

        <div className={this.props.stage === 1 ? 'line1' : 'line1 active'}></div>
        <div className={this.props.stage === 3 ? 'line2 active' : 'line2'}></div>
      </div>
    );
  }
}

export default Progress